<template>
   <div>
    <el-table
    :data="itemList"
    style="width: 100%"
    max-height="250">
    <el-table-column fixed prop="number" label="试题编号" width="150"></el-table-column>
    <el-table-column prop="subject" label="学科" width="120"> </el-table-column>
    <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
    <el-table-column label="题型" width="120">
       <template #default={row}>
        {{getQuestionType(row.questionType)}}
      </template>
    </el-table-column>
    <el-table-column  label="题干" width="300">
      <template #default='{row}'>
        <span v-html="row.question"></span>
      </template>
    </el-table-column>
    <el-table-column  label="录入时间" width="120">
      <template #default='{row}'>
         <!-- {{row.addDate}} -->
        {{row.addDate | myMoment }}
      </template>
    </el-table-column>
    <el-table-column label="难度" width="120">
      <template #default='{row}'>
        {{getDifficulty(row.difficulty)}}
      </template>
    </el-table-column>
    <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
    <el-table-column  label="审核状态" width="120">
      <template #default='{row}'>
        {{getChkState(row.chkState)}}
      </template>
    </el-table-column>
    <el-table-column prop="chkRemarks" label="审核意见" width="120"></el-table-column>
    <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
    <el-table-column prop="publishState" label="发布状态" width="120">
      <template #default='{row}'>
        {{getPublishState(row.publishState)}}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="200">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="previewRow(scope.$index, itemList)"
          type="text"
          size="small">
          预览
        </el-button>
        <el-button
          :disabled="scope.row.chkState!==0"
          @click.native.prevent="pass(scope)"
          type="text"
          size="small">
          审核
        </el-button>
        <el-button
          @click.native.prevent="$router.push(`new?${itemList[scope.$index].id}`)"
          type="text"
          size="small">
          修改
        </el-button>
        <el-button
          @click.native.prevent="grounding(scope.$index, itemList)"
          type="text"
          size="small">
          {{itemList[scope.$index].publishState===1?'下架':'上架'}}
        </el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.$index, itemList)"
          type="text"
          size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 弹出框组件 -->
    <quertions-table
    :dialogVisible.sync="dialogVisible"
    :topicData='topicData'
    :getQuestionType='getQuestionType'
    :getDifficulty="getDifficulty"
    >
    </quertions-table>
    <!-- 弹出审核对话框 -->
    <el-dialog title="题目审核" :visible.sync="show" width="400px" @close="choiceTable">
      <el-form size="small" ref='FormData' :model="auditData">
        <el-form-item>
          <el-radio :label="1" v-model.number="auditData.chkState">通过</el-radio>
          <el-radio :label="2" v-model.number="auditData.chkState">拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea"  placeholder="请输入审核意见"  v-model="auditData.chkRemarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="choiceTable">取消</el-button>
        <el-button  type="primary" @click="confirm">确认</el-button>
      </div>
    </el-dialog>
   </div>
</template>

<script>
import QuertionsTable from './quertions-table.vue'
import { detail, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions.js'
// 导入对应的常量,用key得到对应的value
export default {
  name: 'Quserions',
  components: {
    QuertionsTable
  },
  props: {
    itemList: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 点击预览功能
    async previewRow (index, rows) {
      //  这个是移除功能,将数据从数组中移除  index是对应的下标,rows是对应展示的数组
      // rows.splice(index, 1)
      // 弹出对话框=====>对话框多个地方使用,可以封装一个组件
      this.dialogVisible = true
      // 筛选出来当前点击的这一项数据,渲染页面
      // this.topicData = rows[index] 发请求获取到数据
      const id = rows[index].id
      const { data } = await detail({ id })
      this.topicData = data
    },
    // 审核功能
    pass (data) {
      // 打开对话框
      this.show = true
      // 获取到id
      // console.log(data.row.id)
      this.auditData.id = data.row.id
    },
    // 定义一个方法,获取到key对应的value(怎样整合一起,不然需要定义4个函数,对应名字判断好像可以,但是有一个名字不对应,数据也不对应,从定向差了点)
    // 处理题型
    getQuestionType (data) {
      // itemList.questionType,temList.difficulty,temList.chkState,emList.publishState
      if (data === '1') {
        return '单选'
      } else if (data === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    // 难度数据处理
    getDifficulty (data) {
      // itemList.questionType,temList.difficulty,temList.chkState,emList.publishState
      if (data === '1') {
        return '简单'
      } else if (data === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    // 审核状态
    getChkState (data) {
      // itemList.questionType,temList.difficulty,temList.chkState,emList.publishState
      if (data === 0) {
        return '待审核'
      } else if (data === 1) {
        return '已审核'
      } else {
        return '以拒绝'
      }
    },
    // 发布状态
    getPublishState (data) {
      // itemList.questionType,temList.difficulty,temList.chkState,emList.publishState
      if (data === 0) {
        return '待发布'
      } else if (data === 1) {
        return '已发布'
      } else {
        return '已下架'
      }
    },
    // 处理审核业务
    confirm () {
      // 1. 表单预校验
      this.$refs.FormData.validate(async (boo) => {
        if (boo) {
          // 如果没有输入内容,提示
          if (!this.auditData.chkRemarks) return this.$message.info('请输入内容')
          // 点击确定后,发送请求
          await choiceCheck(this.auditData)
          // 会阻塞,成功后,给个消息提示
          this.$message.success('请求成功')
          // 关闭对话框,并且重置表单数据
          this.choiceTable()
          // 重新获取数据
          this.$emit('getNewItemList')
        }
      })
    },
    // 关闭对话框
    choiceTable () {
      // 关闭对话框
      this.show = false
      // 重置表单数据
      this.auditData = {
        id: '',
        chkState: '1',
        chkRemarks: ''
      }
    },
    // 处理上架下架业务
    async grounding (index, list) {
      // console.log(list[index])
      // const id = list[index].id
      // 1. 打开对话框===>这里需要数据,重哪里获取到
      const str = await this.$confirm(`您确认${list[index].publishState === 1 ? '下架' : '上架'}架这道题目吗?`, '提示', {
        type: 'warning'
      }).catch(() => {})
      if (str !== 'confirm') return this.$message.info('已取消')
      // 2. 修改取反状态
      list[index].publishState = list[index].publishState === 1 ? 0 : 1
      // 3. 确认后发起请求==>需要什么参数
      console.log(list[index])
      await choicePublish(list[index])
      // 4. 重新获取数据信息，子传夫通知修改
      this.$emit('getNewListData')
    },
    // 处理删除业务
    async deleteRow (index, list) {
      // 1. 弹出确认框
      const str = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (str !== 'confirm') return this.$message.info('已取消操作')
      // 2. 确认后发起请求
      // console.log(list[index].id)
      await remove(list[index])
      // 3. 删除后，重新刷新页面===>派发事件，让父组件更新
      this.$emit('getChoice')
    }
  },
  data () {
    return {
      dialogVisible: false,
      topicData: {}, // 点击的题目数据
      show: false, // 审核对话框
      // 修改审核请求需要的数据
      auditData: {
        id: '',
        chkState: 1,
        chkRemarks: ''
      }
    }
  }
}
</script>
